<template>
  <div>
    <el-dialog
      v-loading.fullscreen.lock="ajaxLoading"
      title="产品模版属性"
      align="center"
      :visible.sync="childFormVisible"
      :close-on-click-modal="false"
      @close="hide"
    >
      <el-form :inline="true" :model="formInline" style="width: 80%; margin-left:10%;">
        <el-form-item
          v-for="(item, index) in formInline.datas"
          :key="item.id"
          class="demo-form-inline"
          :label="'属性' + (index+1)"
        >
          <span>键:</span>
          <el-input v-model="item.name" size="mini" placeholder="名称" />
          <span>值:</span>
          <el-input v-model="item.value" size="mini" placeholder="值" />
          <el-button size="mini" type="danger" @click.prevent="removeItem(item)">删除</el-button>
        </el-form-item>
      </el-form>
      <div slot="footer" align="center">
        <el-button size="mini" type="success" @click="onAdd">新增属性</el-button>
        <el-button size="mini" type="primary" @click="onSubmit">提交</el-button>
        <el-button size="mini" @click="resetForm">重置</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { Post as edit_product_attr_from_local } from '@/api/erp/elicink/productAttr'
import { edit_product_attr_from_crawl } from '@/api/erp/crawlproduct'

const _ = require('lodash')

export default {
  name: 'ProductAttr',
  props: ['templateDialogVisible', 'model', 'product_id', 'src'],
  data() {
    return {
      formInline: { datas: [] },
      childFormVisible: false,
      ajaxLoading: false
    }
  },
  watch: {
    templateDialogVisible(v) {
      this.childFormVisible = v
      this.formInline.datas = _.cloneDeep(this.model)
    }
  },
  methods: {
    resetForm(formName) {
      this.formInline.datas = _.cloneDeep(this.model)
    },
    removeItem(item) {
      const index = _.findIndex(this.formInline.datas, item)
      if (index !== -1) {
        this.formInline.datas.splice(index, 1)
      }
    },
    onAdd() {
      this.formInline.datas.push({
        name: '',
        value: ''
      })
    },
    onSubmit() {
      let ajax_method
      switch (this.src) {
        case 'crawl':
          ajax_method = edit_product_attr_from_crawl
          break
        default:
          ajax_method = edit_product_attr_from_local
          break
      }
      this.ajaxLoading = true
      if (this.product_id instanceof Array) {
        ajax_method(
          null,
          {
            'product_ids': this.product_id,
            'datas': this.formInline.datas
          })
          .then(response => {
            this.childFormVisible = false
            this.$emit('reload')
            this.notify('修改成功')
            this.ajaxLoading = false
          })
          .catch(e => {
            this.ajaxLoading = false
          })
      } else {
        ajax_method(this.product_id, this.formInline.datas)
          .then(response => {
            this.childFormVisible = false
            this.$emit('reload')
            this.notify('修改成功')
            this.ajaxLoading = false
          }).catch(e => {
            this.ajaxLoading = false
          })
      }
    },
    notify(message, duration) {
      this.$notify({
        title: '成功',
        message: message,
        type: 'success',
        duration: duration || 2000
      })
    },
    hide() {
      this.childFormVisible = false
      this.$emit('cancelProductAttrDialog', false)
    }
  }
}
</script>

<style scoped>
  .demo-form-inline .el-input.el-input--mini {
    width: 35%
  }
</style>
